<template>
  <div>
    <div id="chart" style="width: 600px;height:500px;">展示地图的地方</div>
  </div>
</template>

<script>
  import echarts from 'echarts'   //引入echarts
  import 'echarts/map/js/china'   //引入中国地图
  import axios from 'axios'       //引入axios
  let option ={
    title:{   //标题
      text:'实时疫情地图',
      x:'center',   //居中
      textStyle:{   //标题 样式
        color:'#9c0505'
      }
    },
    tooltip:{  //提示信息
      trigger: 'item',   //类型
      //地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
      formatter: '地区：{b}<br/>确诊：{c}'
    },
    series:[  //数据
      {
        type:'map',  //图表的类型
        map:'china',
        data:[
          {name: '北京', value: 100},
          {name: '湖北', value: 12000},
          {name: '湖南', value: 2000},
          {name: '西藏', value: 30},
        ],
        label:{  //图形上的文本标签，可用于说明图形的一些数据信息
          show:true,
          color:'red',
          fontSize:10
        },
        zoom:1.3,  //当前视角的缩放比例。
        itemStyle:{  //地图区域的多边形 图形样式。
          borderColor:'blue',
        },
        emphasis:{  //高亮状态下的设置
          label:{  //图形上的文本标签，可用于说明图形的一些数据信息
            color:'#fff',
            fontSize:12
          },
          itemStyle:{  //地图区域的多边形 图形样式。
            areaColor:'green',
          },
        }
      }
    ],
    visualMap: {  //视觉地图
      type:'piecewise',   //分段型
      show:true,
      pieces: [
        {min: 10000}, // 不指定 max，表示 max 为无限大（Infinity）。
        {min: 1000, max: 9999},
        {min: 100, max: 999},
        {min: 10, max: 99},
        {min: 1, max: 9},
        {value: 0}     // 不指定 min，表示 min 为无限大（-Infinity）。
      ],
      inRange: {  //范围
        color: ['#fff', '#ffaa85', '#660208'],
      },
      itemWidth:10,
      itemHeight:10
    },
    toolbox: {
      show: true,
      orient: 'horizontal',
      left: 'right',
      top: 'top',
      feature: {
        dataView: {readOnly: false},
        restore: {},
        saveAsImage: {}
      }
    },
  };
  export default {
    name: "ECharts",
    data() {
      return {
        myChart:''
      }
    },
    mounted(){
      this.getData();
      // 基于准备好的dom，初始化echarts实例
      this.myChart = echarts.init(document.getElementById('chart'));
      // 使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(option);
    },
    methods:{
      getData(){    //获取网络接口数据
        axios.get('/news/wap/fymap2020_data.d.json?_=1585397547299')
        .then(data=>{
          data = data.data
          console.log(data.data.list)
          //data.data.list
          //使用js里面map()方法，循环遍历后，获取数据里面一部分值。
          var lists = data.data.list.map(item=>{return {name: item.name, value: item.value}});
          console.log(lists);
          option.series[0].data = lists;
          // 使用刚指定的配置项和数据显示图表。
          this.myChart.setOption(option);
        })
        .catch( (error) => {
          console.log(error);
        });
      }
    }
  }
</script>

<style scoped>
  #chart {
    margin: 0 auto;
  }
</style>
